import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:get/get.dart';

import '../../../../../../components/log_utils.dart';
import '../../../../../../resources/str_res_keys.dart';

/**
 *
 * @Description TODO
 * @Author liuer
 * @CreateTime 2024年03月06日 15:22
 */
class TemperatureChart extends StatefulWidget {

  List<dynamic> gunTemperatureData;//枪温度
  List<dynamic> maxTemperatureData;//单体电池最高温度
  List<dynamic> minTemperatureData;//单体电池最低温度
  List<dynamic> gunPositiveTemperatureData;//充电枪正极温度
  List<dynamic> gunNegativeTemperatureData;//充电枪负极负温度
  TemperatureChart({
    super.key,
    required this.gunTemperatureData,
    required this.maxTemperatureData,
    required this.minTemperatureData,
    required this.gunPositiveTemperatureData,
    required this.gunNegativeTemperatureData,
  });

  @override
  State<TemperatureChart> createState() => _TemperatureChartState();
}

class _TemperatureChartState extends State<TemperatureChart> {
  List<String> paramList = [
    ResKey.gunTemperature.tr,
    ResKey.batteryMaxTemperature.tr,
    ResKey.batteryMinTemperature.tr,
    ResKey.positiveTemperature.tr,
    ResKey.negativeTemperature.tr,
  ];
  @override
  Widget build(BuildContext context) {
    // Log.d('gunTemperatureData===' + widget.gunTemperatureData.toString());
    return Echarts(
      captureHorizontalGestures: true,
      option:  '''
 {
  color: ['#3DD598', '#007DFF'],
 /// 纵轴
  yAxis: [
    {
      type: 'value',
      show:true,
      // min:0,
      // max:1000,
      name: ${jsonEncode(ResKey.temperature.tr)},
      data:[2,4,6,8,10],
      nameTextStyle: {
        align: "left"
      },
      offset: 0,
      /// 坐标轴在 grid 区域中的横向分隔线
      splitLine: {
        show: true,
        lineStyle: {
          type: [10, 5],
          dashOffset: 5,
          color: 'rgba(0,0,0,0.09)',
          width: 1
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 11,
      },
    }
  ],
     /// 横轴
  xAxis: {
    type: 'category',                
    axisLine:{
      show: false,
    }, 
    
    axisTick: {
      show: false
    }, 
    axisLabel: {
      color: '#999999',
      fontSize: 11,
      interval: function (index) { // 自定义间隔函数 
          if (index % 240 === 0) { // 每四小时显示一次  // 返回值是五分钟为一个间隔
              return true;
          } else {
              return false;
          }
      },
    },
  },
  /// 坐标轴
  grid: {
    top: 30,
    // bottom: 50,
    bottom: 70,
    right: 20,
    left:30,
    containLabel: true,
  },
  legend: {
    show: true,
    icon: 'rect',
    itemHeight: 3,
    itemWidth: 12,
     textStyle: {
      borderRadius: [2, 2, 2, 2]
    },
    left:20,
    right:20,
    top:'230',
  },
  
  ///提示框
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,0.85)',
    borderWidth: 0,
    opacity: 0.2,
    confine: true,
    padding: [
      10, // 上
      8, // 右
      10, // 下
      8 // 左
    ],
    textStyle: {
      color: 'white'
    },
        axisPointer: {
      /// 坐标轴指示器配置项
      lineStyle: {
        color: 'rgba(0,0,0,0.09)',
        position: function (pt) {
          return [pt[0], 500];
        }
      }
    },
  },
    /// 图表数据
  series: [
    {
      name: ${jsonEncode(paramList[0])},
      color: '#1890FF',
      type: 'line',
      data: ${jsonEncode(widget.gunTemperatureData)},
    },
    {
      name: ${jsonEncode(paramList[1])},
      color: '#2FC25B',
      type: 'line',
     data: ${jsonEncode(widget.maxTemperatureData)},
    },
    {
      name: ${jsonEncode(paramList[2])},
      color: '#67D7FC',
      type: 'line',
     data: ${jsonEncode(widget.minTemperatureData)},
    },
    {
      name:  ${jsonEncode(paramList[3])},
      color: '#F79631',
      type: 'line',
     data: ${jsonEncode(widget.gunPositiveTemperatureData)},
    },
    
    {
      name: ${jsonEncode(paramList[4])},
      color: '#FAC958',
      type: 'line',
      data: ${jsonEncode(widget.gunNegativeTemperatureData)},
    },
  ],
}
  ''',
    );
  }
}
